<template>
  <div>
    <el-form :model="dataForm" :rules="dataRules" ref="dataForm" label-width="130px" :disabled="!isEdit">
      <div>
        <div class="seciont-1">基本信息</div>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="合伙人姓名" prop="realName">
              <el-input v-model="dataForm.realName" placeholder="合伙人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="合伙人手机号" prop="mobile">
              <el-input v-model="dataForm.mobile" placeholder="合伙人姓手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="合伙人来源" prop="source">
              <el-select v-model="dataForm.source" placeholder="合伙人来源" clearable>
                <el-option v-for="(item, index) in sourceTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="合伙人角色" prop="mobile">
              <el-select v-model="dataForm.partnerRole" placeholder="合伙人角色" clearable>
                <el-option v-for="(item, index) in partnerRoleList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="所在城市" prop="regionIds">
              <el-cascader
                v-model="dataForm.regionIds"
                :options="options"
                :props="props"
                clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="合伙人身份证号" prop="idCard">
              <el-input v-model="dataForm.idCard" placeholder="合伙人身份证号" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="身份证照片" prop="idCardPhotoPositive">
              <pic-upload v-model="dataForm.idCardPhotoPositive"></pic-upload>
              <div style="color: #666666;font-size: 12px;margin-top: -15px">上传身份证正面照片，只支持JPEG和PNG格式</div>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="身份证反面" prop="idCardPhotoBack">
              <pic-upload v-model="dataForm.idCardPhotoBack"></pic-upload>
              <div style="color: #666666;font-size: 12px;margin-top: -15px">上传身份证反面照片，只支持JPEG和PNG格式</div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <div class="seciont-1">银行卡信息</div>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="开户行名称" prop="bank">
              <el-input v-model="dataForm.bank" placeholder="开户行名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="支行名称" prop="bankName">
              <el-input v-model="dataForm.bankName" placeholder="支行名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="银行卡号" prop="bankCode">
              <el-input v-model="dataForm.bankCode" placeholder="银行卡号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="持卡人姓名" prop="cardUserName">
              <el-input v-model="dataForm.cardUserName" placeholder="持卡人姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="银行卡正面" prop="bankPhotoPositive">
              <pic-upload v-model="dataForm.bankPhotoPositive"></pic-upload>
              <div style="color: #666666;font-size: 12px;margin-top: -15px">上传银行卡正面照片，只支持JPEG和PNG格式</div>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="银行卡反面" prop="bankPhotoBack">
              <pic-upload v-model="dataForm.bankPhotoBack"></pic-upload>
              <div style="color: #666666;font-size: 12px;margin-top: -15px">上传银行卡背面照片，只支持JPEG和PNG格式</div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <div class="seciont-1">加盟信息</div>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="加盟费" label-width="160px" prop="joinMoney">
              <el-input v-model="dataForm.joinMoney" placeholder="加盟费"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="加盟日期" label-width="160px" prop="joinDate">
              <el-date-picker
                v-model="dataForm.joinDate"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                type="date"
                placeholder="加盟日期日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="授权台数" label-width="160px" prop="creditNum">
              <el-input v-model.number="dataForm.creditNum" type="number" placeholder="授权台数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="电动车片区分佣比例%" label-width="160px" prop="defaultDivideRate">
              <el-input v-model.number="dataForm.defaultDivideRate" type="number" min="0" max="100" placeholder="电动车片区分佣比例"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="汽车片区分佣比例%" label-width="160px" prop="carDivideRate">
              <el-input v-model.number="dataForm.carDivideRate" type="number" min="0" max="100" placeholder="汽车片区分佣比例"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item label="合同编号" label-width="160px" prop="contractNo">
              <el-input v-model="dataForm.contractNo" placeholder="合同编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="合同文件" label-width="160px" prop="contractDocList">
              <mul-pic-upload v-model="dataForm.contractDocList"></mul-pic-upload>
              <div style="color: #666666;font-size: 12px;">上传合同照片，只支持JPEG和PNG格式</div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-form-item>
        <div>
          <el-button type="primary" @click.stop="save" :loading="loading">确定</el-button>
          <el-button type="primary" @click.stop="back">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import picUpload from '@/components/pic-upload/index.vue'
  import MulPicUpload from '@/components/mul-pic-upload'
  export default {
    name: 'addPartner',
    components: {
      picUpload,
      MulPicUpload
    },
    data () {
      return {
        loading: false,
        isEdit: false,
        dataForm: {
          id: '',
          realName: '',
          mobile: '',
          source: '',
          partnerRole: '',
          regionIds: '',
          idCard: '',
          idCardPhotoPositive: '',
          idCardPhotoBack: '',

          bank: '',
          bankName: '',
          bankCode: '',
          cardUserName: '',
          bankPhotoPositive: '',
          bankPhotoBack: '',

          joinMoney: '',
          joinDate: '',
          creditNum: '',
          defaultDivideRate: '',
          carDivideRate: '',
          contractNo: '',
          contractDocList: []
        },

        dataRules: {
          realName: [
            {required: true, message: '合伙人姓名不能为空', trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '合伙人手机号不能为空', trigger: 'blur'}
          ],
          source: [
            {required: true, message: '合伙人来源不能为空', trigger: 'blur'}
          ],
          partnerRole: [
            {required: true, message: '合伙人角色不能为空', trigger: 'blur'}
          ],
          regionIds: [
            {required: true, message: '所在城市不能为空', trigger: 'blur'}
          ],
          idCard: [
            {required: true, message: '身份证号不能为空', trigger: 'blur'}
          ],
          idCardPhotoPositive: [
            {required: true, message: '身份证号正面图不能为空', trigger: 'blur'}
          ],
          idCardPhotoBack: [
            {required: true, message: '身份证号反面图不能为空', trigger: 'blur'}
          ],
          joinMoney: [
            {required: true, message: '加盟费不能为空', trigger: 'blur'}
          ],
          joinDate: [
            {required: true, message: '加盟日期不能为空', trigger: 'blur'}
          ],
          creditNum: [
            {required: true, message: '授权台数不能为空', trigger: 'blur'}
          ],
          defaultDivideRate: [
            {required: true, message: '电动车片区分佣比例不能为空', trigger: 'blur'}
          ],
          carDivideRate: [
            {required: true, message: '汽车片区分佣比例不能为空', trigger: 'blur'}
          ],
          contractNo: [
            {required: true, message: '合同编号不能为空', trigger: 'blur'}
          ],
          contractDocList: [
            {required: true, message: '合同文件不能为空', trigger: 'blur'}
          ]
        },
        options: [],
        props: {
          checkStrictly: true,
          label: 'name',
          value: 'id',
          children: 'childs'
        },
        sourceTypeList: [
          {
            label: '加盟',
            value: 0
          },
          {
            label: '购买',
            value: 1
          }
        ],
        partnerRoleList: [
          {
            label: '公司合伙人',
            value: 0
          },
          {
            label: '市场合伙人',
            value: 1
          },
          {
            label: '管理合伙人',
            value: 2
          },
          {
            label: '分佣合伙人',
            value: 3
          },
          {
            label: '购买设备合伙人',
            value: 4
          }
        ]
      }
    },
    mounted () {
      this.dataForm.id = this.$route.query.id
      this.isEdit = this.$route.query.type == 1 ? false : true
      this.getAreaList()
      if (this.dataForm.id) {
        this.getPartnerDetail(this.dataForm.id)
      }
    },
    methods: {
      back () {
        this.$router.back(-1)
      },
      getAreaList () {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/system/get/all/region'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.options = data.data
        })
      },

      getPartnerDetail (id) {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/partner/detail'),
          method: 'get',
          params: this.$http.adornParams({
            id: id
          })
        }).then(({ data }) => {
          console.log(data)
          this.dataForm = data.data
          let joinDate = new Date(this.dataForm.joinDate)
          this.dataForm.joinDate = this.dateFormat('YYYY-mm-dd', joinDate)
        })
      },

      dateFormat (fmt, date) {
        let ret
        const opt = {
          'Y+': date.getFullYear().toString(),        // 年
          'm+': (date.getMonth() + 1).toString(),     // 月
          'd+': date.getDate().toString(),            // 日
          'H+': date.getHours().toString(),           // 时
          'M+': date.getMinutes().toString(),         // 分
          'S+': date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
          }
        }
        return fmt
      },

      save () {
        this.$refs['dataForm'].validate((valid) => {
          if (!valid) {
            return
          }
          if(!this.dataForm.idCardPhotoPositive) {
            this.$message.error('身份证正面图片不能为空')
            return
          }
          if(!this.dataForm.idCardPhotoBack) {
            this.$message.error('身份证反面图片不能为空')
            return
          }
          if(this.dataForm.contractDocList.length == 0) {
            this.$message.error('合同图片不能为空')
            return
          }
          this.dataForm.joinDate = this.dataForm.joinDate + ' 00:00:00'
          this.loading = true
          this.$http({
            url: this.$http.adornUrl(this.dataForm.id?'/v1/merchant/partner/update':'/v1/merchant/partner/add'),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({ data }) => {
            this.loading = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.back()
              }
            })
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .seciont-1{
    padding: 0px 0px 15px 0px;
    margin-bottom: 12px;
    color: #333333;
    font-weight: bold;
    border-bottom:  solid 1px #DADADA;
  }
  .el-form .el-input {
    position: relative;
    width: 100%
  }

  .el-select{
    width: 100%
  }
  .el-cascader{
    width: 100%
  }
</style>
